<template>
  <div class="wrapper">
    <div class="address">
      <div class="right">
        <div class="content">
          <div class="title" style="text-align: center;">&nbsp;&nbsp;&nbsp;添加地址</div>
          <div>
            <div>省级地址:</div>
            <input type="text" ref="sheng">
          </div>
          <div>
            <div>市级地址:</div>
            <input ref="shi" type="text" placeholder="">
          </div>
          <div>
            <div> 县区地址:</div>
            <input ref="xian" type="text" placeholder="">
          </div>
          <div>
            <div>联系方式:</div>
            <input ref="phone" type="text">
          </div>
          <div>
            <div>详细地址:</div>
            <div ref="detail" aria-placeholder="镇乡街道门牌号"
              style="width: 240px;height: 100px;background-color: #fff;border: 0;outline: none;color: black;border-radius: 8px;"
              contenteditable="true">
            </div>
          </div>
          <div @click="add_address" class="issue" style="
      height: 40px;border-radius: 8px;width: 160px;text-align: center;">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;点击添加
          </div>
        </div>
      </div>
      <div class="left">
        <div class="content">
          <div class="content-top" style="text-align: left;">
            当前地址：<br />
            {{ currentAddress.sheng }}省，{{ currentAddress.shi }}市，
            {{ currentAddress.xian }}县/区，{{ currentAddress.detail }},
            电话：{{ currentAddress.phone }}
          </div>
          <div class="content-bot">
            <div v-for="(item, index) in addresses">
              <div class="left">
                {{ item.sheng }}省，{{ item.shi }}市， {{ item.xian }}县/区，{{ item.detail }},电话：{{ item.phone }}
              </div>
              <div class="right">
                <div @click="use(index)">使用</div>
                <div @click="del(index)">删除</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Test",
  created() {
    let cd = localStorage.getItem("currentAddress")
    if (cd != null && cd != undefined) {
      this.currentAddress = JSON.parse(cd)
    } else {
      this.currentAddress = {
        sheng: 'xx',
        shi: 'xx',
        xian: 'xx',
        detail: 'xx',
        phone: '123456'
      }
    }
  },
  data() {
    return {
      addresses: [],
      currentAddress: null
    };
  },
  props: {},
  methods: {
    add_address() {
      let sheng = this.$refs.sheng.value
      let shi = this.$refs.shi.value
      let xian = this.$refs.xian.value
      let detail = this.$refs.detail.innerText
      let phone = this.$refs.phone.value
      this.addresses.push({
        sheng: sheng,
        shi: shi,
        xian: xian,
        detail: detail,
        phone: phone
      })
      this.$refs.sheng.value = ''
      this.$refs.shi.value = ''
      this.$refs.xian.value = ''
      this.$refs.detail.innerText = ''
      this.$refs.phone.value = ''
    },
    del(index) {
      this.addresses.splice(index, 1)
    },
    use(index) {
      this.currentAddress = this.addresses[index]
      localStorage.setItem("currentAddress", JSON.stringify(this.currentAddress))
    }
  },
};
</script>

<style lang="scss" scoped>


.wrapper {
  position: absolute;
  bottom: 0;
  right: 0;
  height: calc(100vh - 27px);
  width: calc(100vw - 50px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba($color: #000000, $alpha: 0);

  .address {
    display: flex;
    width: 100%;
    height: 100%;

    .right {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: rgba($color: #e60000, $alpha: 0);
      width: calc(50% - 1px);
      height: 100%;
      border-right: #ccc5c5 1px solid;

      .content {
        border-radius: 8px;
        text-align: center;
        height: 500px;
        width: 340px;
        background-color: rgba($color: #000000, $alpha: 0.3);
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;

        div {
          width: 320px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          div {
            width: 70px;

            font-size: 16px;
          }

          input {
            width: 200px;
            height: 20px;
            list-style: none;
            background-color: #ffffff;
            color: #0f0f0f;
          }
        }

        .title {
          height: 60px;
          width: 200px;
          line-height: 60px;
          text-align: center;
          border-radius: 12px;
          font-size: 30px;
          color: #ffffff;
        }

        .issue {
          font-size: 22px;
          color: #f8ff22;
          background-color: rgb(198, 209, 200);
        }

        .issue:hover {
          background-color: rgb(166, 248, 191);
        }

      }
    }

    .left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: rgba($color: #e60000, $alpha: 0);
      width: 50%;
      height: 100%;

      .content {
        border-radius: 8px;
        text-align: center;
        height: 500px;
        width: 340px;
        background-color: rgba($color: #000000, $alpha: 0.3);
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;

        .content-top {
          word-break: break-all;
          white-space: pre-wrap;
          overflow: hidden;
          text-overflow: ellipsis;
          text-align: left;
          color: #000000;
          width: 300px;
          height: 100px;
          background-color: #ffea09;
          border-radius: 4px;
        }

        .content-bot {
          width: 300px;
          height: 360px;
          background-color: rgba($color: #000000, $alpha: 0);
          border-radius: 8px;
          overflow-y: scroll;

          div {
            word-break: break-all;
            white-space: pre-wrap;
            text-overflow: ellipsis;
            text-align: left;
            margin-top: 20px;
            width: 296px;
            height: 90px;
            background-color: #ffffff;
            border-radius: 8px;
            color: #000000;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;

            .left {
              margin-top: 0px;
              background-color: #2ff260;
              width: 230px;
              height: 90px;
            }

            .right {
              margin-top: 0px;
              width: 66px;
              height: 90px;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              align-items: center;
              background-color: #911212;

              div {
                margin-top: 0px;
                background-color: #b2f4c3;
                height: 30px;
                width: 60px;
                line-height: 30px;
                text-align: center;
              }

              div:hover {
                background-color: #ccff33;
              }
            }
          }
        }

        .content-bot::-webkit-scrollbar-track {
          -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
          background-color: rgba($color: #000000, $alpha: 0);
          border-radius: 10px;
        }

        .content-bot::-webkit-scrollbar {
          width: 4px;
          background-color: rgba($color: #000000, $alpha: 0);
        }

        .content-bot::-webkit-scrollbar-thumb {
          border-radius: 10px;
          background-color: #FFF;
          background-image: -webkit-gradient(linear,
              40% 0%,
              75% 84%,
              from(#4D9C41),
              to(#19911D),
              color-stop(.6, #54DE5D))
        }
      }
    }
  }
}
</style>